<template>
    <!-- 散点图 -->
    <div class="width100 height100" :id="splasheId">

    </div>
</template>

<script>
import * as echarts from "echarts";
export default {
    name: 'splashes',
    emits: [],
    components: {},
    props: {
        // 布局类型
        layout: { type: String, default: 'one' },
        showClass: { type: Boolean },
        change: {},
        socketObj: { type: Object, default: () => { } },
        name: { type: String },
        url: { type: String },
    },
    watch: {
        change() {
            this.$nextTick(() => {
                setTimeout(this.chartResize, 50)
            })
        },
        socketStatus(val) {
            if (val) this.initUpdateBack();
        },
    },
    computed: {
        socketStatus() {
            return this.socketObj.status
        }
    },
    created() {
        // radar折线图id
        this.splasheId = this.$uuid();
    },
    mounted() {
        this.$nextTick(() => {
            setTimeout(() => {
                // 初始化图像
                this.initChart();
                // 初始化回调函数和启动接收数据
                this.initUpdateBack();
            }, 100)
        })
    },
    data() {
        return {
            // 散点图id
            splasheId: null,
            // 散点图对象
            splasheChart: null,
            // 图形固定参数设置
            option: {
                // 图形位置
                grid: [
                    { top: '50', bottom: '50', left: '5%', width: '44%', containLabel: false, show: true, backgroundColor: 'black', },
                    { top: '50', bottom: '50', left: '55%', width: '44%', containLabel: false, show: true, backgroundColor: 'black', },
                    { top: '10', height: '20', left: '5%', right: '10', containLabel: false, show: true },
                ],
                // 进度条固定值
                pictorialBar: { xAxisIndex: 2, yAxisIndex: 2, type: 'pictorialBar', symbol: 'rect', symbolBoundingData: 1, symbolRepeat: false },
                xAxis: { type: 'value', nameGap: 10, nameRotate: 90, boundaryGap: false, axisLine: { onZero: false }, splitLine: { show: false }, scale: true },
                yAxis: { type: 'value', nameGap: 10, nameRotate: 0, nameTextStyle: { padding: [50, 0, 0, 0], rich: {} }, axisLine: { onZero: false }, splitLine: { show: false } },
            }

        }
    },
    methods: {
        // 初始化socket返回处理函数
        initUpdateBack() {
            if (!this.socketObj) return;
            this.socketBack();
            this.startPush();
        },
        // 设置socket回调函数
        socketBack() {
            // 雷达图回调函数
            this.socketObj.setMsgBack({
                cmd: `push-${this.url}`,
                fun: rs => {
                    // 占比、过去、现在
                    let { snrdb, scatterOrg, scatterEq } = this.formartResult(rs.data);
                    this.updateCharts(snrdb, scatterOrg, scatterEq)
                },
            })
        },
        // 启动推送消息
        startPush() {
            // 启动频谱图数据接收
            this.socketObj.sendMsg({ cmd: `start-${this.url}` })
            // .then(rs => {
            //     console.log(`${this.name}启动成功:`, rs)
            // })
        },
        // socket数据过滤统一处理
        formartResult(result) {
            let { dataLables, data } = result;
            let resultMap = {};
            if (dataLables.length != data.length) {
                console.log("数据解析失败:", result)
                return resultMap
            } else {
                for (let i = 0; i < dataLables.length; i++) {
                    resultMap[dataLables[i]] = data[i]
                }
            }
            return resultMap
        },
        // 初始化图形dom
        initChart(snrdb = [], scatterOrg = [], scatterEq = []) {
            if (!this.splasheChart) this.splasheChart = echarts.init(document.getElementById(this.splasheId));
            this.splasheChart.setOption({
                grid: this.option.grid,
                xAxis: [
                    { ...this.option.xAxis },
                    { ...this.option.xAxis, gridIndex: 1 },
                    { max: 1, splitLine: { show: false }, axisLabel: { show: false }, gridIndex: 2 }
                ],
                yAxis: [
                    { ...this.option.yAxis },
                    { ...this.option.yAxis, gridIndex: 1 },
                    { data: [''], inverse: true, axisTick: { show: false }, axisLine: { show: false }, axisLabel: { show: false }, gridIndex: 2 },
                ],
                series: [
                    { data: scatterOrg, type: 'scatter', symbolSize: 2, xAxisIndex: 0, yAxisIndex: 0, },
                    { data: scatterEq, type: 'scatter', symbolSize: 2, xAxisIndex: 1, yAxisIndex: 1, },
                    { data: snrdb, ...this.option.pictorialBar, itemStyle: { color: '#2CA6E0' }, symbolClip: true, z: 100, },
                    { data: [1], ...this.option.pictorialBar, itemStyle: { opacity: 0.5, color: '#9A9DAA' }, animationDuration: 0, z: 99, }
                ]
            });
        },
        // 更新雷达图
        updateCharts(snrdb, scatterOrg, scatterEq) {
            if (!this.splasheChart) {
                this.initChart(snrdb, scatterOrg, scatterEq);
            } else {
                this.splasheChart.setOption({
                    series: [
                        { data: scatterOrg },
                        { data: scatterEq },
                        { data: snrdb }
                    ]
                })
            }
        },
        // 适配图像
        chartResize() {
            if (!this.splasheChart) {
                this.initChart()
            } else {
                this.splasheChart.resize()
            }
        }
    },
    beforeDestroy() {
        // 删除socket的数据监听
        if (this.socketObj) {
            // 停止推送
            this.socketObj.sendMsg({ cmd: `stop-${this.url}` });
            // 删除处理函数
            this.socketObj.removeMsgBack({ cmd: `push-${this.url}` })

        }
    }
}
</script>

<style lang="scss" scoped></style>